<template>
  <div class="dynamic-page">
    <div class="page-header">
      <h1>{{ pageTitle }}</h1>
      <p class="page-description">{{ pageDescription }}</p>
    </div>

    <div class="page-content">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>{{ pageTitle }} - 功能开发中</span>
          </div>
        </template>

        <div class="development-notice">
          <el-alert
            title="功能开发中"
            type="info"
            description="此页面功能正在开发中，敬请期待！"
            :closable="false"
            show-icon
          />

          <div class="mock-content">
            <el-row :gutter="20" class="mt-4">
              <el-col :span="8">
                <el-card shadow="hover">
                  <template #header>
                    <div class="card-header">
                      <span>功能预览</span>
                    </div>
                  </template>
                  <div class="feature-preview">
                    <el-icon size="40" color="#409eff">
                      <Setting />
                    </el-icon>
                    <h3>{{ pageTitle }}</h3>
                    <p>这里将显示 {{ pageTitle }} 的相关功能</p>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="8">
                <el-card shadow="hover">
                  <template #header>
                    <div class="card-header">
                      <span>数据统计</span>
                    </div>
                  </template>
                  <div class="stats-preview">
                    <el-statistic title="总数量" :value="1234" />
                    <el-statistic title="今日新增" :value="56" />
                  </div>
                </el-card>
              </el-col>

              <el-col :span="8">
                <el-card shadow="hover">
                  <template #header>
                    <div class="card-header">
                      <span>快速操作</span>
                    </div>
                  </template>
                  <div class="quick-actions">
                    <el-button type="primary" icon="Plus">新增</el-button>
                    <el-button type="success" icon="Download">导出</el-button>
                    <el-button type="warning" icon="Setting">设置</el-button>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { Setting } from '@element-plus/icons-vue'

const route = useRoute()

// 从路由参数获取页面信息
const pageTitle = computed(() => {
  return route.params.title as string || route.meta?.title as string || '动态页面'
})

const pageDescription = computed(() => {
  return `这是 ${pageTitle.value} 的页面，功能正在开发中`
})
</script>

<style scoped>
.dynamic-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-description {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.page-content {
  background: #fff;
  border-radius: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.development-notice {
  text-align: center;
  padding: 20px 0;
}

.mock-content {
  margin-top: 20px;
}

.feature-preview {
  text-align: center;
  padding: 20px 0;
}

.feature-preview h3 {
  margin: 10px 0;
  color: #303133;
}

.feature-preview p {
  color: #909399;
  margin: 0;
}

.stats-preview {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
}

.quick-actions .el-button {
  width: 100%;
}

.mt-4 {
  margin-top: 20px;
}
</style>
